<template>
    <div class="box" v-if="store.isSearch">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>详细信息</span>
                </div>
            </template>
            <el-table :data="store.searchLists" height="350" style="width: 100%" border>
                <el-table-column type="index" width="50" />
                <el-table-column prop="date" label="年份" align="center" />
                <el-table-column prop="name" label="地点" align="center" />
                <el-table-column prop="data" :label="store.info" align="center" />
            </el-table>
        </el-card>
        <el-button type="danger" @click="close">X</el-button>
    </div>
</template>

<script setup>
import { mapStore } from '@/stores/counter';
const store = mapStore()

const close = () => {
    store.isSearch = false
}
</script>

<style scoped lang="scss">
.box {
    position: fixed;
    top: 20%;
    left: 23%;
    width: 800px;

    .el-button {
        position: absolute;
        top: 0;
        right: 0;
    }
}
</style>
